<template>
  <div class="register">
    <div class="container">
      <div class="register-form">
        <div class="logo" @click="$touter.push('/index')">
          <img src="/imgs/logo-mi.png">
          <span>注册小米账号</span>
        </div>
        <el-form
          :model="registerForm"
          :rules="registerFormRules"
          ref="registerFormRef"
          label-position="top"
        >
          <el-form-item label="小米账号" prop="username">
            <el-input v-model="registerForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="registerForm.password" type="password"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="registerForm.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="logon">立即注册</el-button>
          </el-form-item>
          <a href="/#/login">已有账号，前往登录</a>
        </el-form>
      </div>
    </div>
    <nav-footer></nav-footer>
  </div>
</template>

<script>
  import { getRegister } from './../../util/request.js'
  import NavFooter from '../../components/NavFooter'
  export default {
    data() {
      var checkEmail = (rule, value, cb) => {
      const regEmail = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/
      if (!regEmail.test(value)) {
        cb(new Error('请输入正确的邮箱地址'))
      } else {
        cb()
      }
    }
      return {
        registerForm: {
          username: '',
          password: '',
          email: ''
        },
        registerFormRules: {
          username: [
            { required: true, message: '请输入小米账号', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 8, max: 16, message: '长度在 8 到 16 个字符', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { validator: checkEmail, trigger: 'blur' }
          ]
        }
      }
    },
    components: {
      NavFooter
    },
    methods: {
      logon() {
        const that = this
        let params = {
            username: that.registerForm.username,
            password: that.registerForm.password,
            email: that.registerForm.email
        }
        that.$refs.registerFormRef.validate( valide => {
          if (!valide) return that.$message.error('信息错误')
          getRegister(params).then((res) => {
            this.$message.success('注册成功即将跳转登录页面')
            setTimeout(() => {
              this.$router.push('/login')
            }, 1000)
          }, error => {
            this.$message.error(error)
          })
        })
      }
    }
  }
</script>

<style lang='scss' scoped>
@import '../../assets/scss/config.scss';
.register{
  background: #f9f9f9;
  .container{
    padding: 60px 0;
    .register-form{
      width: 850px;
      height: 565px;
      background: #fff;
      margin: auto;
      .logo{
        width: 100%;
        text-align: center;
        img{
          display: inline-block;
          width: 50px;
          height: 50px;
        }
        span{
          display: inline-block;
          width: 100%;
          font-weight: bold;
          font-size: 30px;
          margin-top: 46px;
        }
      }
      .el-form{
        width: 332px;
        margin: 0 auto;
        /deep/.el-form-item__label{
          padding: 0;
        }
        .el-button{
          width: 100%;
          border: none;
          background: $colorA;
          color: #fff;
          height: 42px;
        }
        a{
          color: #333;
        }
      }
    }
  }
  .nav-footer{
    background: #f9f9f9;
    border: none;
  }
}


</style>